<template>
    <div>
        <div class="box">
            <el-col :span="15">
                <el-input type="text" placeholder="请输入员工工号作为检索关键字" v-model="keyword" maxlength="10"
                          show-word-limit></el-input>
            </el-col>
            <div>
                <el-button type="primary" round @click="searchSalaryChange">查找</el-button>
            </div>
        </div>
        <el-table
                :data="tableData_SalaryChange"
                style="width: 100%">
            <el-table-column
                    prop="workNumber"
                    label="员工工号">
            </el-table-column>
            <el-table-column
                    prop="changeType"
                    label="薪资变更类型">
            </el-table-column>
            <el-table-column
                    prop="amount"
                    label="薪资变更数目">
            </el-table-column>

            <el-table-column
                    prop="occurTime"
                    label="薪资变更时间">
            </el-table-column>
            <el-table-column
                    prop="reason"
                    label="薪资变更原因">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData_SalaryChange: [],
                keyword: '',

            }
        },
        methods: {
            searchSalaryChange() {
                //判断输入的数是否满足要求
                if (this.keyword.length !== 10){
                    this.$message.error('输入工号不满足10位')
                    this.keyword = ''
                }
                else {
                    let data = {
                        "token": this.$store.state.token,
                        'workNumber': this.keyword
                    }
                    this.$http.post('/getSalaryChangeInfo', data).then( res => {
                        this.tableData_SalaryChange = res.data
                    })
                }
            },
            fetch() {
                let data = {
                    "token": this.$store.state.token,
                    'workNumber': null
                }
                this.$http.post('/getSalaryChangeInfo', data).then( res => {
                    this.tableData_SalaryChange = res.data
                })
            }
        },
        created() {
            this.fetch()
        }
    }
</script>

<style scoped>

</style>
